<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单词交互测试b1u2</title>
<style>
    body, html {
        height: auto;
        margin: 0;
        font-family: Arial, sans-serif;
        display: block;
        overflow-y: scroll;
    }
    #content {
        text-align: center;
        width: 100%;
        padding: 20px;
    }
    #word {
        font-family: Arial-Black, sans-serif;
        font-size: 36px;
        color: blue;
        margin-top: 20px;
    }
    .option {
        margin: 5px;
        padding: 10px;
        border: 2px solid #007BFF;
        border-radius: 5px;
        color: black;
        background-color: white;
        font-size: 16px;
        cursor: pointer;
        width: 300px;
        display: inline-block;
        text-align: left;
        box-sizing: border-box;
    }
    .option:hover {
        background-color: #f0f0f0;
    }
    #optionsContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
    }
    #progressBar {
        width: 90%;
        background-color: #ddd;
        margin: 20px 0;
    }
    #progress {
        height: 20px;
        background-color: #4CAF50;
        width: 0%;
    }
    #stats {
        margin-top: 10px;
    }
    #incorrectWords {
        margin-top: 20px;
        font-size: 16px;
        color: red;
        width: 100%;
        text-align: left;
        padding: 0 20px;
    }
    @media (max-width: 600px) {
        .option {
            width: 80%;
        }
        #optionsContainer {
            flex-direction: column;
        }
    }
</style>
<script>
const words = {
    "nest": "鸟窝；巢穴，窝",
    "roof": "屋顶，顶部",
    "battle": "争论；战斗，搏斗；斗争",
    "see_eye_to_eye_with_sb": "（在某事上）与某人看法一致",
    "argument": "争吵，争论；论点",
    "teenager": "青少年",
    "tension": "紧张关系；紧张；拉伸",
    "anxious": "忧虑的，担心的；令人焦虑的；渴望的",
    "rate": "速度；率，评价，评估",
    "shoot": "(使朝某方向)冲，奔；射击；射杀；摄影",
    "shoot_up": "快速长高，蹿个儿",
    "spot": "粉刺；斑点；污渍；地点，场所",
    "target": "(攻击的)目标，对象；靶子，把…作为攻击目标；面向",
    "anger": "怒气，怒火",
    "mental": "思想的，精神的，智力的",
    "adult": "成年人",
    "desire": "渴望，愿望",
    "struggle": "奋斗；斗争；搏斗",
    "rough": "艰难的；粗糙的；不确切的",
    "breakdown": "(关系)破裂；故障",
    "regular": "频繁的，有规律的",
    "calm": "使平静，使镇静，镇静的，沉着的",
    "calm_down": "平静，镇静，安静",
    "view": "看法；视线；景色，把…视为；观看",
    "from_ones_point_of_view": "从某人的角度、观点出发",
    "think_sth_through": "充分考虑，全盘考虑，想透",
    "concern": "担心，忧虑；关心，涉及；让(某人)担忧",
    "back_down": "承认错误，认输",
    "normal": "正常的，一般的，常态，通常标准",
    "stress": "精神压力，紧张；强调，强调，着重",
    "editor": "主编，编辑；剪辑师",
    "argue": "争吵，争辩，争论，说理，论证",
    "skin": "皮肤，(兽)皮，毛皮",
    "design": "设计；制订，设计，设计艺术",
    "forum": "论坛，讨论会",
    "expert": "专家，行家，熟练的，内行的，专家的",
    "likely": "可能的，预料的，有希望的",
    "unique": "独一无二的；独特的；独具的，特有的",
    "passive": "消极的，被动的",
    "performance": "表现；表演；执行，履行",
    "cheer_up": "(使)变得高兴，振奋起来",
    "press": "催促，逼迫；按，压，挤，推，报章杂志，报刊，新闻工作者，新闻界",
    "eager": "热切的，渴望的，渴求的",
    "youth": "青年时期，青春，年轻人",
    "adventure": "冒险，冒险经历，奇遇",
    "be_on_sbs_back_about_sth": "缠磨，烦扰",
    "kangaroo": "袋鼠",
    "flexible": "灵活的，可变动的；柔韧的",
    "account": "账户；描述；解释，认为是，视为",
    "rent": "租金，租用；出租",
    "grocery": "食品杂货；食品杂货店",
    "secure": "安心的，可靠的；牢固的",
    "graduate": "毕业，毕业生",
    "gather": "聚集，召集，收拢；搜集，收集；聚集",
    "emergency": "突发事件，紧急情况",
    "volunteer": "自愿做，义务做，志愿者",
    "pipe": "烟斗；管子；管乐器",
    "figure": "数字；人物；体型，身材",
    "downtown": "在市中心，往市中心，楼下",
    "draw_sth_out_of_sth": "提取，支取",
    "operation": "手术；运转，操作",
    "lap": "大腿部",
    "teller": "出纳员；叙述者",
    "scene": "(戏剧等)场；场面，片段；地点，现场；景象，风光",
    "flat": "公寓，平坦的；瘪了的",
    "response": "回复；反应，响应",
    "teacher": "老师"
};

let keys = Object.keys(words);
let totalWords = keys.length;
let correctCount = 0;
let wordsAnswered = 0;
let incorrectWords = [];

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

shuffle(keys);

function generateQuestion() {
    if (keys.length === 0) {
        document.getElementById('word').textContent = "Quiz Completed!";
        document.getElementById('optionsContainer').style.display = "none";
        return;
    }
    const questionIndex = keys.pop();
    const questionWord = questionIndex;
    const correctAnswer = words[questionWord];
    let options = [];
    let tempKeys = Object.keys(words).filter(key => key !== questionWord);
    shuffle(tempKeys);
    tempKeys = tempKeys.slice(0, 3);
    options = tempKeys.map(key => words[key]);
    options.push(correctAnswer);
    shuffle(options);
    document.getElementById('word').textContent = questionWord.replace('_', ' ');
    document.getElementById('optionA').textContent = 'A: ' + options[0];
    document.getElementById('optionB').textContent = 'B: ' + options[1];
    document.getElementById('optionC').textContent = 'C: ' + options[2];
    document.getElementById('optionD').textContent = 'D: ' + options[3];
    document.getElementById('correct').value = options.indexOf(correctAnswer);
    updateProgress();
}

function checkAnswer(selected) {
    const correct = document.getElementById('correct').value;
    const selectedButton = document.querySelectorAll('.option')[selected];
    if (selected === parseInt(correct)) {
        selectedButton.style.backgroundColor = 'lightgreen';
        document.getElementById('match').play();
        correctCount++;
    } else {
        selectedButton.style.backgroundColor = 'lightcoral';
        document.getElementById('unmatch').play();
        const incorrectWord = document.getElementById('word').textContent.trim();
        incorrectWords.push(incorrectWord + ': ' + words[incorrectWord.replace(' ', '_')]);
        updateIncorrectWords();
    }
    setTimeout(() => {
        selectedButton.style.backgroundColor = 'white';
        wordsAnswered++;
        updateStats();
        generateQuestion();
    }, 1000);
}

function updateProgress() {
    const progressPercent = ((totalWords - keys.length) / totalWords) * 100;
    document.getElementById('progress').style.width = `${progressPercent}%`;
}

function updateStats() {
    const correctRate = ((correctCount / wordsAnswered) * 100).toFixed(1);
    document.getElementById('stats').textContent = `正确个数: ${correctCount} / ${wordsAnswered} (${correctRate}%)`;
}

function updateIncorrectWords() {
    const incorrectWordsContainer = document.getElementById('incorrectWords');
    incorrectWordsContainer.innerHTML = '';
    incorrectWords.forEach(word => {
        const wordElement = document.createElement('div');
        wordElement.textContent = word;
        incorrectWordsContainer.appendChild(wordElement);
    });
}

document.addEventListener('DOMContentLoaded', generateQuestion);
</script>
</head>
<body>
<div id="content">
    <h1>单词交互测试b1u2</h1>
    <p id="word"></p>
    <div id="optionsContainer">
        <button id="optionA" class="option" onclick="checkAnswer(0)"></button>
        <button id="optionB" class="option" onclick="checkAnswer(1)"></button>
        <button id="optionC" class="option" onclick="checkAnswer(2)"></button>
        <button id="optionD" class="option" onclick="checkAnswer(3)"></button>
    </div>
    <div id="progressBar">
        <div id="progress"></div>
    </div>
    <div id="stats"></div>
    <input type="hidden" id="correct">
    <div id="incorrectWords"></div>
</div>
<audio id="match" src="match.wav"></audio>
<audio id="unmatch" src="unmatch.wav"></audio>
</body>
</html>
